<!-- 登录界面 -->
<template>
  <div class="login clear">
    <!-- 中间登录框 -->
    <div class="login_center">
      <!-- 左边登录框 -->
      <div class="loginLeft">
        <!-- 登录login -->
        <div class="above">
          <img src="./images/logo.png" alt="" />
        </div>

        <p>使用您的云诊所账号登录</p>

        <!-- 登录方式 -->
        <div class="loginMode">
          <div>
            <el-button type="primary" @click="QRcode">扫码登陆</el-button>
            <el-button type="primary" @click="User">账号登陆</el-button>
          </div>

          <div>
            <!-- 二维码登录 -->
            <div class="QRCode" v-if="flog">
              <div>
                <img src="./images/qq.png" alt="" />
              </div>
              <p>打开 手机号QQ 扫描二维码</p>
            </div>

            <!-- 账号登录 -->
            <div id="userLogin" v-if="user">
              <el-input v-model="username" placeholder="手机号/邮箱" clearable />
              <el-input v-model="password" type="password" placeholder="密码" clearable />
              <button id="LoginBtn" @click="login">登录</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边图片 -->
      <div class="loginRight">
        <img src="./images/bg.png" alt="" />
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import router from "@/router";
import axios from "@/utils/http";
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
import { useStore, mapMutations, mapGetters } from "vuex";

const store = useStore();
const setUserInfo = mapMutations(["setUserInfo"]).setUserInfo.bind({
  $store: store,
});
const getUser = computed(mapGetters(["setUserInfo"]).setUserInfo.bind({
  $store: store,
}))

const setMenuInfo = mapMutations(["setMenuInfo"]).setMenuInfo.bind({
  $store: store,
});

let username = ref("");
let password = ref("");

let flog = ref(false);
let user = ref(true);

/* —————————————————————— 二维码登录 —————————————————————— */
function QRcode() {
  flog.value = true;
  user.value = false;
}

/* —————————————————————— 账号登录 —————————————————————— */
function User() {
  flog.value = false;
  user.value = true;
}

/* —————————————————————— 登录发请求 —————————————————————— */
/* ———————— 普通登录接口 ———————— */
let login = async () => {
  //发登录请求
  await axios({
    url: "/login/sulogin",
    method: "get",
    params: {
      empUserName: username.value,
      empPassword: password.value,
    },
  })
    .then((res) => {
      console.log(res);

      //判断状态码
      if (res.data.code == 200) {
        //状态码为200 ，成功
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        // //登录成功跳转到主界面

      } else {
        //状态码 不等于200
        ElMessage.error("登录失败");
      }
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("登录失败");
    });
  await axios({
    url: "/login/initMenu",
    method: "get",
    params: {
    }
  }).then((res: any) => {
    store.state.router.userData.menuInfo = res.data.data
  }).catch(err => {
    console.log(err);
  })
  await axios({
    url: "/login/getCurrentEmp",
    method: "get",
    params: {
    }
  }).then((res: any) => {
    store.state.router.userData.userInfo = res.data.data
  }).catch(err => {
    console.log(err);
  })
  sessionStorage.setItem("loginUser", "loginUser");
  let flag = false;
  store.state.router.userData.menuInfo.map((item:any)=>{
    if(item.menuUrl=="/data")
      flag=true;
  })
if(flag){
  router.push("/data")
  store.state.router.userData.firstMenu = "数据统计"
}else{
  router.push(store.state.router.userData.menuInfo[0].menuUrl);
  store.state.router.userData.firstMenu = store.state.router.userData.menuInfo[0].menuName
}
  

};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.clear::after {
  display: block;
  content: "";
  clear: both;
}

.login {
  z-index: 10;
  width: 100%;
  background: #f3f5f8;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 中间登录框 */
.login_center {
  width: 1000px;
  height: 450px;
  /*  ; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 左边登录框 */
.loginLeft {
  width: 40%;
  height: 100%;
  background: white;
  float: left;
}

/* 登录login */
.above {
  width: 100%;
  height: 100px;
  /* border: 1px solid blue; */
}

.above>img {
  width: 100%;
  height: 100%;
}

.loginLeft>p {
  font-size: 20px;
  text-align: center;
  margin: 10px auto;
  color: gray;
}

/* 右边图片框 */
.loginRight {
  width: 60%;
  height: 450px;
  background: white;
  float: left;
  overflow: hidden;
}

.loginRight>img {
  width: 100%;
  height: 450px;
}

/* 登录方式 */
.loginMode {
  width: 100%;
  height: 300px;
  /*  ; */
}

.el-button {
  width: 190px;
  height: 45px;
  line-height: 45px;
  font-size: 20px;
}

.el-button--primary {
  --el-button-bg-color: #e5e5e5;
  --el-button-border-color: none;
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-1);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  --el-button-disabled-text-color: var(--el-color-white);
  --el-button-disabled-border-color: var(--el-color-primary-light-5);
}

.el-button+.el-button {
  margin-left: 0px;
}

.loginMode>div:nth-of-type(1) {
  text-align: center;
  margin: auto;
  height: 50px;
  /*  background: pink; */
}

/* 二维码登录 */
.QRCode {
  width: 100%;
  height: 200px;
  background: white;
  text-align: center;
  margin: 10px auto;
  /* display: none; */
}

.QRCode>p {
  margin: 10px auto;
  text-align: center;
}

/* 账号登录 */
.el-input {
  margin: 10px auto;
}

#userLogin {
  width: 100%;
  height: 180px;
  background: white;
  text-align: center;
  margin: 10px auto;
  /* display: none; */
}

#LoginBtn {
  width: 100%;
  height: 40px;
  background: skyblue;
  border: none;
  font-size: 22px;
  color: white;
  /*   font-weight: bold; */
  text-align: center;
  margin: 40px auto;
  line-height: 40px;
  cursor: pointer;
}

#LoginBtn:hover {
  background: #00a0f0;
}
</style>